<template>
  <div class="app-container">
    <el-form
      ref="form"
      :rules="formRules"
      :inline="true"
      :model="form"
      label-width="80px"
    >
      <!-- 固定项目 -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" palceholder="请输入姓名"> </el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" palceholder="请输入手机号"> </el-input>
      </el-form-item>

      <!-- 动态增加项目 -->
      <!-- 不止一个项目，用div包裹起来 -->
      <div v-for="(item, index) in form.dynamicItem" :key="index">
        <el-select
          v-model="item.name"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="9" value="9"></el-option>
          <el-option label="10" value="10"></el-option>
          <el-option label="11" value="11"></el-option>
          <el-option label="12" value="12"></el-option>
        </el-select>
        <el-col :span="20">
          <el-checkbox-group v-model="item.phone">
            <el-checkbox-button label="1" name="type">1</el-checkbox-button>
            <el-checkbox-button label="1" name="type">2</el-checkbox-button>
            <el-checkbox-button label="3" name="type">3</el-checkbox-button>
            <el-checkbox-button label="4" name="type">2222</el-checkbox-button>
            <el-checkbox-button label="5" name="type"></el-checkbox-button>
            <el-checkbox-button label="6" name="type"></el-checkbox-button>
            <el-checkbox-button label="7" name="type"></el-checkbox-button>
            <el-checkbox-button label="8" name="type"></el-checkbox-button>
            <el-checkbox-button label="9" name="type"></el-checkbox-button>
            <el-checkbox-button label="10" name="type"></el-checkbox-button>
            <el-checkbox-button label="11" name="type"></el-checkbox-button>
            <el-checkbox-button label="12" name="type"></el-checkbox-button>
          </el-checkbox-group>
        </el-col>
        <el-form-item>
          <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
        </el-form-item>
      </div>
    </el-form>

    <el-button @click="addItem()" type="primary">增加</el-button>
  </div>
</template>


<script>
export default {
  name: "home",
  data() {
    return {
      form: {
        type: "",
        name: "",
        phone: "",
        select3: "",
        dynamicItem: [],
      },
      formRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "目前只支持中国大陆的手机号码",
          },
        ],
      },
    };
  },
  methods: {
    addItem() {
      this.form.dynamicItem.push({
        name: "",
        phone: "",
      });
      console.log(this.form.dynamicItem[1].name);
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
    },
  },
};
</script>

<style scoped>
</style>
